<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
	<script src="./js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="./js/echarts.min.js"></script>
 
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
      
     
     var ROOT_PATH = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';
     
     var chartDom = document.getElementById('main');
     var myChart = echarts.init(chartDom);
     var option;
     
     myChart.showLoading();
     $.getJSON(ROOT_PATH + '/data/asset/data/les-miserables.json', function (graph) {
         myChart.hideLoading();
     
         graph.nodes.forEach(function (node) {
             node.label = {
                 show: node.symbolSize > 30
             };
         });
     
         option = {
             title: {
                 text: 'Les Miserables',
                 subtext: 'Circular layout',
                 top: 'bottom',
                 left: 'right'
             },
             tooltip: {},
             legend: [{
                 data: graph.categories.map(function (a) {
                     return a.name;
                 })
             }],
             animationDurationUpdate: 1500,
             animationEasingUpdate: 'quinticInOut',
             series: [
                 {
                     name: 'Les Miserables',
                     type: 'graph',
                     layout: 'circular',
                     circular: {
                         rotateLabel: true
                     },
                     data: graph.nodes,
                     links: graph.links,
                     categories: graph.categories,
                     roam: true,
                     label: {
                         position: 'right',
                         formatter: '{b}'
                     },
                     lineStyle: {
                         color: 'source',
                         curveness: 0.3
                     }
                 }
             ]
         };
     
         myChart.setOption(option);
     });
     
     option && myChart.setOption(option);
    </script>
</body>
</html>